<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard - Servers</title>
    <link rel="shortcut icon" href="/logo.gif" type="image/gif" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
      rel="stylesheet"
    />
    <style>
      @font-face {
        font-family: "Euclid Circular B Medium";
        src: url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.eot");
        src: url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.eot?#iefix")
        format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.woff2")
        format("woff2"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.woff")
        format("woff"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.ttf")
        format("truetype"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.svg#Euclid Circular B Medium")
        format("svg");
        font-display: swap;
      }

      body {
        background: linear-gradient(to right, #8a2387, #e94057, #f27121);
        color: #fff;
        overflow-x: hidden;
        font-family: "Euclid Circular B Medium", Poppins;
      }

      @media (min-width: 991.98px) {
        main {
          padding-left: 240px;
        }
      }

      /* Sidebar */
      .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        padding: 100px 0 0; /* Height of navbar */
        width: 240px;
      }

      .circle1,
      .circle2,
      .circle3 {
        background: linear-gradient(
                to right bottom,
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.1)
        );
        position: absolute;
        border-radius: 50%;
        z-index: -100;
      }

      .circle1 {
        top: 5%;
        right: 5%;
        height: 10rem;
        width: 10rem;
      }
      .circle2 {
        top: 10%;
        left: 10%;
        border-radius: 50%;
        height: 8rem;
        width: 8rem;
      }
      .circle3 {
        bottom: 10%;
        left: 5%;
        border-radius: 50%;
        height: 6rem;
        width: 6rem;
      }

      @media (max-width: 991.98px) {
        .sidebar {
          width: 100%;
          z-index: 100;
        }
      }
      .sidebar .active {
        border-radius: 5px;
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
      }

      .sidebar-sticky {
        position: relative;
        top: 0;
        height: calc(100vh - 48px);
        padding-top: 0.5rem;
        overflow-x: hidden;
        overflow-y: auto;
      }

      #servers img {
        border-radius: 50%;
        border: 2px solid white;
        margin: 10px;
        cursor: pointer;
      }

      .hide {
        display: none;
      }

      .footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .footer p {
        margin: 0;
        line-height: 26px;
        font-size: 15px;
        color: #fff;
      }

      .footer p a {
        background: linear-gradient(to right, #8a2387, #e94057, #f27121);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-decoration: none;
      }

      .footer p a:hover {
        color: white;
      }
    </style>
  </head>

  <body>
    <section class="main">
      <!--Main Navigation-->
      <header>
        <!-- Sidebar -->
        <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
          <div class="position-sticky">
            <div class="list-group list-group-flush mx-3 mt-4">
              <a
                href="/dashboard"
                class="list-group-item list-group-item-action py-2 ripple"
                style="
                  background: rgba(255, 255, 255, 0.35);
                  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                  backdrop-filter: blur(9px);
                  -webkit-backdrop-filter: blur(9px);
                  border-radius: 10px;
                  border: 1px solid rgba(255, 255, 255, 0.18);
                "
                aria-current="true"
              >
                <i class="fas fa-tachometer-alt fa-fw me-3"></i
                ><span>Main Dashboard</span>
              </a>
              <br />
              <a
                href="/servers"
                class="list-group-item list-group-item-action py-2 ripple active"
                style="
                  background: rgba(255, 255, 255, 0.35);
                  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                  backdrop-filter: blur(9px);
                  -webkit-backdrop-filter: blur(9px);
                  border-radius: 10px;
                  border: 1px solid rgba(255, 255, 255, 0.18);
                "
              >
                <i class="fas fa-server fa-fw me-3"></i
                ><span>Manage Servers</span>
              </a>
              <br />
              <a
                href="/logout"
                class="list-group-item list-group-item-action py-2 ripple"
                style="
                  background: rgba(255, 255, 255, 0.35);
                  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                  backdrop-filter: blur(9px);
                  -webkit-backdrop-filter: blur(9px);
                  border-radius: 10px;
                  border: 1px solid rgba(255, 255, 255, 0.18);
                "
              >
                <i class="fas fa-sign-out-alt fa-fw me-3"></i
                ><span>Logout</span>
              </a>
            </div>
          </div>
        </nav>
        <!-- Sidebar -->

        <!-- Navbar -->
        <nav
          id="main-navbar"
          class="navbar navbar-expand-lg navbar-light fixed-top"
        >
          <!-- Container wrapper -->
          <div class="container-fluid">
            <!-- Toggle button -->
            <button
              class="navbar-toggler"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#sidebarMenu"
              aria-controls="sidebarMenu"
              aria-expanded="false"
              aria-label="Toggle navigation"
              onclick="function re(){ let r = $('#sidebarMenu'); if(r.hasClass('collapse'))r.removeClass('collapse');else r.addClass('collapse')}re()"
            >
              <i class="fas fa-bars"></i>
            </button>

            <!-- Brand -->
            <a class="navbar-brand text-white" href="/">
              <img src="/logo.gif" height="40" alt="" loading="lazy" />
              Dashboard - Servers
            </a>
            <div>
              <h1 class="server-name"></h1>
            </div>
          </div>
        </nav>
        <!-- Navbar -->
      </header>
      <!--Main Navigation-->

      <!--Main layout-->
      <main style="margin-top: 58px">
        <div class="container pt-4">
          <!--Section: Main-->
          <section>
            <h1>Select A Server To Manage</h1>
            <div id="servers" class="flex"></div>
          </section>
          <!-- Footer -->
          <div class="footer">
            <div class="container">
              <div class="row">
                <div class="col-md-12">
                  <div class="copyright-text">
                    <p>
                      ©
                      <a href="//github.com/SudhanPlayz/Discord-MusicBot"
                        >Discord Music Bot</a
                      >. All rights reserved. Made by
                      <a href="//github.com/SudhanPlayz">Sudhan</a> and its
                      <a
                        href="//github.com/SudhanPlayz/Discord-MusicBot/graphs/contributors"
                        >contributors</a
                      >
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Footer -->
        </div>
      </main>
      <!--Main layout-->
    </section>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
      crossorigin="anonymous"
    ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </body>
  <script>
    $(document).ready(() => {
      $.get("/api/user", (data) => {
        data.user.guilds.forEach((Guild) => {
          if (!Guild.hasPerms) return;
          $("#servers").append(`
<img class="server-${Guild.id}" onclick="window.location = '/servers/${
            Guild.id
          }'" width="60" height="60" src="${
            Guild.icon
              ? `https://cdn.discordapp.com/icons/${Guild.id}/${Guild.icon}.png`
              : "https://www.webcolorsonline.com/images/error.png"
          }" alt="${Guild.name}">
`); //yes ofcource im an IDIOT
          $(`.server-${Guild.id}`).hover(() => {
            $(".server-name").text(Guild.name);
          });
        });
      });
    });
  </script>
</html>
